// import Cookies from 'js-cookie'
// 已经封装好 Cookies 了 直接导入使用
import { getToken, setToken } from '@/utils/auth.js'
import { sysLogin } from '@/api/login.js'
import { profile, sysUser } from '@/api/user.js'
// 导入需要权限管理的路由和router
import asyncRoutes from '@/router/modules/index.js'
import Router from '@/router'
import { constantRoutes, resetRouter } from '@/router'

import { Message } from 'element-ui'
const state = {
  // 从Cookies中取出token 如果没有就为空
  token: getToken() || '',
  userInfo: ''
  // token: Cookies.get('token') || ''
}
const mutations = {
  setToken(state, value) {
    state.token = value
    // Cookies.set('token',value)
    setToken(value)
  },
  setUserInfo(state, value) {
    state.userInfo = value
  },
  logout() {
    // this=this.$store
    // 调用通模块的方法
    this.commit('user/setToken', '')
    this.commit('user/setUserInfo', '')
    // 调用方法
    // 每次退出 登录都重置路由
    resetRouter()
  }
}
const actions = {
  async toLogin(store, from) {
    const res = await sysLogin(from)
    // token值 res.data
    // console.log(res.data)
    Message.success('登录成功')
    store.commit('setToken', res.data)
  },
  async getUserInfo({ commit }) {
    const res = await profile()
    // 获取用户头像
    const res2 = await sysUser(res.data.userId)
    // console.log(res2)
    commit('setUserInfo', Object.assign({}, res.data, res2.data))

    // 在获取完用户信息后匹配出该用户能访问的页面
    // asyncRoutes为动态页面
    const newArr = asyncRoutes.filter((item) => {
      return res.data.roles.menus.includes(item.meta.name)
    })
    // 将能访问的页面添加到路由中
    // addRoutes有一定小缺点，它刚添加的路由配置，需要再经过一次导航守卫之后才可正常进行
    Router.addRoutes([...newArr, { path: '*', redirect: '/404', hidden: true }])
    // console.log('menus', res.data.roles.menus)
    // console.log('newArr', newArr)

    // 拿到当前的完整路由信息
    // 将能用户能访问路由页面和静态页面添加到一个数组中
    const allRoutes = [
      ...constantRoutes,
      ...newArr,
      { path: '*', redirect: '/404', hidden: true }
    ]
    // 通过修改vue中路由信息的值进行同步
    // 将数组发送到routes组件中的setRoutesList方法中
    // 页面将根据发送的路由来进行匹配和显示侧边栏中的
    commit('routes/setRoutesList', allRoutes, { root: true })
  }
}
const getters = {}

export default {
  state,
  mutations,
  actions,
  getters,
  namespaced: true
}
